<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="utf-8">
        <title>gRaphaël - 互动的饼图</title>
        <link rel="stylesheet" href="assets/base.css">
        <link rel="stylesheet" href="assets/demo.css">
        <link rel="stylesheet" href="http://dreamsky.github.io/main/blog/common/init.css">
        <style>
        .top-banner {
            background: #333;
        }
        </style>
        <script src="assets/raphael-min.js"></script>
        <script src="assets/g.raphael.js"></script>
        <script src="assets/g.pie.js"></script>
        <script>
            window.onload = function () {
                var r = Raphael("holder"),
                    pie = r.piechart(400, 250, 120, [55, 20, 13, 32, 5, 1, 2, 10], { legend: ["%%.%% - Enterprise Users", "IE Users"], legendpos: "west", href: ["http://www.cnblogs.com/lhb25/", "http://www.cnblogs.com/lhb25/"]});

                r.text(320, 60, "互动的饼图").attr({ font: "20px sans-serif" });
                pie.hover(function () {
                    this.sector.stop();
                    this.sector.scale(1.1, 1.1, this.cx, this.cy);

                    if (this.label) {
                        this.label[0].stop();
                        this.label[0].attr({ r: 7.5 });
                        this.label[1].attr({ "font-weight": 800 });
                    }
                }, function () {
                    this.sector.animate({ transform: 's1 1 ' + this.cx + ' ' + this.cy }, 500, "bounce");

                    if (this.label) {
                        this.label[0].animate({ r: 5 }, 500, "bounce");
                        this.label[1].attr({ "font-weight": 400 });
                    }
                });
            };
        </script>
    </head>
    <body class="raphael">
        <div id="holder" style="margin-top:150px"></div>
        <p style="text-align:center">
            <a href="http://www.cnblogs.com/lhb25/archive/2013/01/07/gRaphael-javascript-chart-library.html">gRaphaël</a> 矢量图表库示例。
        </p>
        <div class="footer-banner" style="width:728px; margin:30px auto"></div>
        <script type="text/javascript" src="http://cdn.staticfile.org/jquery/1.8.2/jquery.min.js"></script>
        <script src="http://dreamsky.github.io/main/blog/common/init.js"></script>        
    </body>
</html>
